<template>
	<color-header></color-header>
	<view class="header-tab">
		<uni-nav-bar title="爪爪快报" left-icon="left" status-bar background-color="transparent" :border="false"
		 @clickLeft="$navTo('',{}, 'navigateBack')"></uni-nav-bar>	
		<tab-nav :nav-list="nav" @nav-tap="navTap"></tab-nav>
	</view>
	<view class="clear-float"></view>
	<view class="news-wrapper"  v-if="news.data.length >0 ">
		<view class="news-list-wrapper"  v-for="item in news.data"  :key="item.id" @click="detail(item.id)">
			<view class="left-wrapper">
				<view class="cover" :style="'background-image:url('+item.cover+')'" ></view>
			</view>
			<view class="right-wrapper">
				<view class="title">{{item.title}}</view>
				<view class="desc">{{item.summary}}......</view>
				<view class="footer" >
					<view class="user">
						<image class="avatar" :src="item.author_avatar"></image>
						<view class="author">{{item.author}}</view>
					</view>
					<view class="read">{{item.click_num}}&nbsp;阅读</view>
				</view>
			</view>
		</view>
		<uni-load-more v-if="news.data.length >= 7" :status="loadStatus"></uni-load-more>
	</view>
	<empty-status v-else note="当前没有内容" src="/static/images/order-empty.png"></empty-status>
	<modal ref="modal"></modal>
	<footer-menu></footer-menu>
</template>

<script>
	import tabNav from '../mine/components/tab-nav.vue'
	export default {
		components: {
			tabNav,
		},
		data() {
			return {
				nav: [],
				status: -1,
				news: {
					data: [],
					page: 1,
					hasMore: false
				},
				loadStatus: 'more',
			}
		},
		computed: {
			tabTop() {
				return uni.getWindowInfo().statusBarHeight + 48 + 'px'
			},
			headerHeight() {
				return uni.getWindowInfo().statusBarHeight + 88 + 'px'
			}
		},
		onLoad() {
			this.getNewsType();
			this.getNewsList();
		},
		onReachBottom() {
			if (this.news.hasMore) {
				this.loadStatus = 'loading'
				this.news.page += 1
				this.getNewsList();
			} else {
				this.loadStatus = 'noMore'
			}
		},
		onPullDownRefresh() {
			uni.showLoading({
				title: '刷新中...',
				mask: true
			})
			//this.getOrderList(true)
			setTimeout(() => {
				uni.hideLoading()
				uni.stopPullDownRefresh()
			}, 800)
		},
		methods: {
			// 导航栏点击事件
			navTap(index) {
				this.status = this.nav[index].id;
				this.getNewsList(true)
			},
			// 获取资讯列表
			async getNewsList(refresh = false) {
				const res = await this.$request.get('/api/news/lists',{
					type: this.status,
					page: this.news.page
				},{ load: false })
				if (res.code == 200) {
					this.loadStatus = 'more'
					const list = res.data?.lists || []
					this.news.hasMore = res.data.has_more_page
					if (refresh) {
						this.news.data = list
						this.news.page = 1
					} else {
						this.news.data = this.news.data.concat(list)
					}
				}
			},
			// 获取资讯类型
			async getNewsType() {
				const res = await this.$request.get('/api/news/type')
				if (res.code == 200) {
					this.nav = res.data;
				}
			},
			detail(id) {
				uni.navigateTo({
					url: '/pages/news/detail?newsId='+id
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.tab-nav {
		// background-color: #fff;
		position: sticky;
		left: 0;
		top: v-bind(tabTop);
		right: 0;
		z-index: 2;
	}
	.header-tab {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		background: linear-gradient(to right, #CDE0F8, #C3F0F0, #DFF8F0);
		z-index: 2;
		
	}
	.clear-float {
		height: v-bind(headerHeight);
	}
	.news-wrapper {
		position: relative;
		.news-list-wrapper{
			width: 718rpx;
			height: 308rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			margin: 0 auto;
			margin-bottom: 16rpx;
			.left-wrapper{
				width: 208rpx;
				height: 258rpx;
				float: left;
				margin-top:24rpx;
				margin-left:16rpx;
				.cover{
					width: 100%;
					height:100%;
					border-radius: 16rpx;
					overflow:hidden;
				    background-position: center center;
					background-repeat: no-repeat;
					-webkit-background-size:cover;
					-moz-background-size:cover;
					background-size:cover;
				}
			}
			.right-wrapper{
				position: relative;
				width: 454rpx;
				height: 258rpx;
				margin-top:24rpx;
				float: left;
				margin-left: 24rpx;
				overflow: hidden;
				.title{
					display: block;
					width: 100%;
					height: auto;
					font-family: PingFangSC, PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #262626;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.desc{
					display: block;
					//margin-top:16rpx;
					width: 100%;
					height: 90rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #7B7B7B;
					text-align: left;
					font-style: normal;
					text-transform: none;
				}
				.footer{
					position: absolute;
					width: 100%;
					height: 36rpx;
					bottom: 0;
					.user{
						float: left;
						width: 300rpx;
						.avatar{
							float: left;
							width: 36rpx;
							height: 36rpx;
							border-radius: 36rpx;
						}
						.author{
							float: left;
							width: auto;
							height: 30rpx;
							margin-left: 10rpx;
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #7B7B7B;
							text-align: left;
							font-style: normal;
							text-transform: none;
						}
					}
					.read{
						float: right;
						width: 120rpx;
						height: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 20rpx;
						color: #B1B1B1;
						text-align: right;
						font-style: normal;
						text-transform: none;
					}
				}
			}
		}
	}
</style>